import { Layout } from 'antd';
import React, { useState } from 'react';
const { Content, Footer } = Layout;
import Menus from '/@/Layouts/component/Sidebar/MenusItem';
import { Outlet } from 'react-router-dom';
import NarBar from '/@/Layouts/component/navBar/index';
import styles from '/@/Layouts/index.module.scss';
import GlobalContext from '/@/Layouts/GlobalContext';
import TagsView from '/@/Layouts/component/TagsView';

import { useStateThemeConfig } from '/@/store/hooks/theme';
import { useStateCurrFull } from '/@/store/hooks/menu';
import CloseFull from '/@/Layouts/component/CloseFull';
export default function Transverse() {
  const [collapsed, setCollapsed] = useState(false);
  const isLockScreen = useStateCurrFull();

  const { topBarHight, IsfixedHead, IsTagsView, IsFooter } = useStateThemeConfig();
  const shrinkFun = () => {
    setCollapsed((collapsed) => !collapsed);
  };

  return (
    <GlobalContext.Provider value={{ collapsed, shrinkFun }}>
      {isLockScreen && <CloseFull></CloseFull>}
      <Layout className={styles.Layout}>
        {!isLockScreen && (
          <NarBar
            className={styles.layout_navbar}
            menus={!isLockScreen && <Menus />}
            style={{
              height: topBarHight + 'px',
              lineHeight: topBarHight + 'px',
            }}
          ></NarBar>
        )}
        <Content style={{ overflowY: 'auto' }}>
          <div style={{ position: IsfixedHead ? 'sticky' : 'unset', top: '1px', zIndex: 1, width: '100%' }}>
            {!isLockScreen && IsTagsView && <TagsView></TagsView>}
          </div>
          <div style={{ padding: '15px' }}>
            <Outlet></Outlet>
          </div>
          {IsFooter && (
            <Footer className={styles['layout_footer']}>
              <div>react-antd-admin，Made by lyt with ❤️</div>
              <div>@ 长沙市 xxx 公司版权所有</div>
            </Footer>
          )}
        </Content>
      </Layout>
    </GlobalContext.Provider>
  );
}
